

<template>
    <div class="Main">
        <div class="MainTitle">
            用户列表
        </div>
        <div class="MianContent">
            <div class="MainTopAction">
                <!-- <div class="flex align-center">
                    <a-button style="margin-right:10px;" icon="plus" type="primary" @click="AddMenu">新增用户</a-button>
                </div> -->
                <div class="flex align-center">
                    <a-input v-model="keyword" allowClear @change="InputChange" style="width: 300px;" placeholder="请输入信息查询" />
                    <a-button class="ml-10" type="primary" @click="SeachKeyword">搜索</a-button>
                </div>
            </div>
            <div class="TableView">
                <a-table :columns="listfields" :data-source="listData" bordered size="middle" :pagination="false">
                    <div slot="action" slot-scope="row, index">
                        <a-button style="margin:0 10px 0 0;" type="primary" size="small" @click="EditNode(index)">详情</a-button>
                        <a-popconfirm placement="bottom" ok-text="删除" cancel-text="取消" @confirm="DeleteItem(index)">
                            <template slot="title">
                                <p>警告</p>
                                <p>此操作将删除该用户, 是否继续?</p>
                            </template>
                            <a-button type="danger" size="small">删除</a-button>
                        </a-popconfirm>
                    </div>
                    <div slot="icon" slot-scope="row,index">
                      <!-- <a-icon :type="row" /> -->
                      {{row}}
                    </div>
                    <div slot="isMenu" slot-scope="row,index">
                      <!-- <a-icon :type="row" /> -->
                      {{row==0?'是':'否'}}
                    </div>
                    <div slot="headerImg" slot-scope="row, index">
                      <div @click="ClickLookImage(row)" v-if="row">
                        <img :src="row" style="width: 50px; height: 50px" />
                      </div>
                    </div>
                </a-table>
                <Pagination :total="total" v-model="pageno" :pageSize.sync="pagesize" @change="handlePageChange" @onShowSizeChange="onShowSizeChange"></Pagination>
            </div>
        </div>
        <a-modal :title="ModalTitle" v-model="visible" :width="800" :centered="true" :maskClosable="false" @ok="handleOk" @cancel="handleCancel">
            <div style="padding-left: 10px;">
                <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
                    <a-form-model-item label="用户名称" prop="nickname">
                        <a-input v-model="form.nickname" placeholder="请输入用户名称" allowClear />
                    </a-form-model-item>
                    <a-form-model-item label="用户登录账号" prop="username">
                        <a-input v-model="form.username" placeholder="请输入用户登录账号" allowClear />
                    </a-form-model-item>
                    <a-form-model-item v-if="!adminId" label="用户登录密码" prop="password">
                        <a-input v-model="form.password" placeholder="请输入用户登录密码" allowClear />
                    </a-form-model-item>
                    <a-form-model-item label="用户头像">
                        <UploadImage v-if="visible" v-model="headerImg" :maxNum="1"></UploadImage>
                    </a-form-model-item>
                </a-form-model>
            </div>
        </a-modal>
        <a-modal v-model="LookImages" :footer="null" centered>
            <div style="margin: 10px;">
                <img :src="SelectImg" style="width: 100%;height: 100%;">
            </div>
        </a-modal>

    </div>
</template>

<script>
    import { mapGetters, mapState, mapActions } from 'vuex';
    import { showErrors, showError, showSuccess } from '@/utils/showMsg';
    import Pagination from '@/components/common/pagination.vue'
    import { userManageList } from '@/views/Columns/userManage'
    import { GetMemberList } from '@/api/api.js';
    import env from '@/config/env';
    import request from '@/utils/request';
    import UploadImage from "@/components/common/Upload";

    export default {
        name: 'list',
        components: {
            Pagination,
            UploadImage,
        },
        data() {
            return {
                total: 0, //定义初始有多少条数据
                pageno: 1, //默认第几页
                pagesize: 10, //一页显示多少条数据
                keyword: '',
                OrderStatus: '',
                listfields: userManageList, //表头列表
                listData: [], //表格数据
                cate:undefined, //进食阶段
                allergy:undefined, //辅食类型

                labelCol: { span: 4 },
                wrapperCol: { span: 20 },
                visible:false,
                ModalTitle:'新增角色',
                form:{
                  nickname:'', //用户名称
                  username:'', //用户登陆账号
                  password:'', //密码
                //   authorityId:'', //选中的角色
                //   authorityIds:[], //选中的角色组
                },
                headerImg:[],//用户头像

                rules:{
                  nickname: [
                    { required: true, message: "请输入用户名称!", trigger: "blur" },
                  ],
                  username: [
                    { required: true, message: "请输入用户登陆账号!", trigger: "blur"},
                  ],
                  
                },

                LookImages: false, //查看图片的modal显示隐藏
                SelectImg: '', //选择的图片链接

                adminId:null,

            };
        },
        computed: {
            ...mapState({}),
        },
        created() {},
        mounted() {
            let that = this;
            that.GetList()
            
        },
        methods: {
            ...mapActions({}),

            // 查看图片
            ClickLookImage(row) {
                this.SelectImg = row
                this.LookImages = true
            },

            InputChange(e) {
                let that = this
                if (e.target.value == '') {
                    that.GetList()
                }
            },
            SeachKeyword() {
                let that = this;
                that.GetList()
            },
            GoOrderDetail(row) {
                this.$router.push({ name: 'OrderInfo', query: { id: row.id, back: 'OrderList' } })
            },
            // 获取数据列表API
            async GetList() {
                let that = this
                let params = {
                    keyword: that.keyword,
                    page: that.pageno,
                    limit: that.pagesize,
                }
                const res = await GetMemberList(params)
                if (res.data.code == 200) {
                    // console.log(res.data);
                    const data = res.data.data
                    if (data.list.length > 0) {
                        data.list.forEach((item, index) => {
                            item.key = item.member_id
                            // item.create_time = new Date(item.create_time).toLocaleString(); //地区时间转换
                            // item.create_time = that.$moment(item.create_time * 1000).format('YYYY-MM-DD  HH:mm:ss'); //时间戳转换成时间
                        })
                    }
                    // console.log(data);
                    that.total = data.count
                    that.listData = data.list
                } else {
                    showError(res.data.msg)
                }
            },

            // 删除用户
            async DeleteItem(row){
                const that = this;
                let params = {
                    ids:[row.member_id]
                }
                let res = await DeleteUser(params)
                if(res.data.code == 200){
                    showSuccess('删除成功！')
                    that.GetList()
                }else{
                    showError(res.data.msg)
                }
            },


            // 新增用户
            AddMenu(){
              const that = this;
              that.visible = true;
              that.ModalTitle = '新增用户';
            //   that.GetAuthorityList()
            },

            // 编辑按钮
            EditNode(row){
                const that = this;
                that.visible = true;
                that.ModalTitle = '编辑用户';
                that.adminId = row.member_id;
                // let authorityIdsArr = []
                // if(row.authorityIds && row.authorityIds.length){
                //     row.authorityIds.forEach(item=>{
                //         authorityIdsArr.push(item.ID)
                //     })
                // }
                that.form.nickname = row.nickname;
                that.form.username = row.username;
                // that.form.authorityId = row.authorityId?row.authorityId:'';
                // that.form.authorityIds = row.authorityId?[row.authorityId]:[];
                // that.selectedRowKeys =  row.authorityId?[row.authorityId]:[];
                // that.headerImg = row.headerImg?[{url:row.headerImg}]:[]
                // that.GetAuthorityList()
            },

            // 关闭对话框
            handleCancel(){
                const that = this;
                that.$refs.ruleForm.resetFields();
                that.adminId = null;
                that.form.nickname = '';
                that.form.username = '';
                that.form.password = '';
                // that.form.authorityId = '';
                // that.form.authorityIds = [];
                // that.selectedRowKeys = [];
                that.headerImg = [];
            },

            // 弹窗确认按钮
            handleOk(){
              const that = this;
              that.$refs["ruleForm"].validate( async (valid) => {
                if(valid){
                    if(!that.adminId && that.form.password == ''){
                        showError('请输入登录密码！')
                        return
                    }
                    // if(!that.selectedRowKeys.length){
                    //     showError('请选择角色权限！')
                    //     return
                    // }
                    let avatar = []; //头像
                    that.headerImg.map((item) => {
                        // item.url ? avatar.push(item.url) : avatar.push(item);
                        item.id ? avatar.push(item.id) : avatar.push(item);
                    });
                    let params = {
                        nickname:that.form.nickname,
                        username:that.form.username,
                        // authorityId:that.selectedRowKeys[0].toString(),
                        // authorityIds:that.selectedRowKeys,
                        avatar_id:avatar.join(',')
                    }
                    let res;
                    if(that.adminId){
                        //编辑
                        params.member_id = that.adminId
                        res = await SetAdminInfo(params)
                    }else{
                        // 新增
                        params.password = that.form.password.toString(),
                        res = await AdminRegister(params)
                    }
                    if(res.data.code == 200){
                        showSuccess(that.adminId?'编辑成功！':'新增成功！')
                        that.handleCancel()
                        that.visible = false
                        that.GetList()
                    }else{
                        showError(res.data.msg)
                    }
                  
                }
              })
            },


            //分页器 
            handlePageChange(pageno, pagesize) { //点击第几页触发的函数
                let that = this;
                that.pageno = pageno;
                that.pagesize = pagesize;
                that.GetList(); //这个是向后台请求的数据函数
            },
            //切换每页显示多少条
            onShowSizeChange(current, size) { //改变每页显示条目数的函数
                let that = this;
                //pagesize 变化的回调
                that.pageno = current;
                that.pagesize = size;
                that.GetList(); //这个是向后台请求的数据函数
            },

            //角色分页器 
            handlePageChangeAuth(pageno, pagesize) { //点击第几页触发的函数
                let that = this;
                that.pageAuth = pageno;
                that.pagesizeAuth = pagesize;
                that.GetAuthorityList(); //这个是向后台请求的数据函数
            },
            //角色切换每页显示多少条
            onShowSizeChangeAuth(current, size) { //改变每页显示条目数的函数
                let that = this;
                //pagesize 变化的回调
                that.pageAuth = current;
                that.pagesizeAuth = size;
                that.GetAuthorityList(); //这个是向后台请求的数据函数
            },
        },
    };
</script>

<style scoped lang="less">
    .Main {
        border-radius: 10px;
        overflow: hidden;
        background: #fff;

        .MainTitle {
            font-size: 24px;
            color: #333;
            margin: 10px 20px;
            position: relative;
        }

        .MainTitle:before {
            content: '';
            width: 40px;
            height: 12px;
            background: linear-gradient(270deg, rgba(0, 158, 238, 0) 0%, rgba(221, 169, 85, 0.3) 100%);
            position: absolute;
            bottom: 2px;
            left: 0;
        }

        .MianContent {
            padding: 10px 20px 20px 20px;

            .MainTopAction {
                margin-bottom: 20px;
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                justify-content: space-between;
            }

            .TabsItem {
                padding: 10px 0;
                width: 70px;
                position: relative;
                margin-right: 24px;
                text-align: center;
                cursor: pointer;
                margin-bottom: 20px;
                color: #000;
            }

            .TabsIndex {
                color: #DDA955;
            }

            .TabsIndex::before {
                content: '';
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translate(-50%, 0%);
                width: 50px;
                height: 2px;
                background-color: #DDA955;
            }
        }
    }
</style>